<template>
  <div class="home clearfx">
    <!-- 1.疫情图片 -->
    <div class="logo">
      <img src="../../assets/images/1.jpg" alt="" width="100%" />
      <!-- 点击进入城市选择 -->
      <router-link class="select" to="/selectCity">{{ city }}🔍</router-link>
      <van-cell is-link @click="showPopup">个人中心</van-cell>
      <van-popup
      v-if="false"
        v-model="show"
        position="left"
        :style="{ height: '100%', width: '40%' }"
      >
        <van-image
          width="100"
          height="100"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-cell is-link >欢迎用户</van-cell>
        <van-cell is-link >修改密码</van-cell>
        <van-cell is-link >退出登录</van-cell>
      </van-popup>
      <van-popup
      v-else
        v-model="show"
        position="left"
        :style="{ height: '100%', width: '40%' }"
      >
        <van-image
          width="100"
          height="100"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <van-cell is-link @click="goLogin">请登录</van-cell>
        <van-cell is-link @click="goRegiest">去注册</van-cell>
      </van-popup>
    </div>
    <!-- 2.病毒信息 -->
    <cov-info :covDesc="covDesc" :news="news" />
    <!-- 3.疫情-小导航 -->
    <div class="list">
      <div class="fl navimg">
        <router-link to="/area">
          <img src="../../assets/images/1.png" alt="" width="40" />
          <div>风险地区</div>
        </router-link>
      </div>
      <div class="fl navimg">
        <router-link to="/hesuan">
          <img src="../../assets/images/2.png" alt="" width="40" />
          <div>核酸检测</div></router-link
        >
      </div>
      <div class="fl navimg">
        <router-link to="/prevention">
          <img src="../../assets/images/3.png" alt="" width="40" />
          <div>防疫物资</div>
        </router-link>
      </div>
      <div class="fl navimg">
        <router-link to="/travel">
          <img src="../../assets/images/4.png" alt="" width="40" />
          <div>出行政策</div>
        </router-link>
      </div>
    </div>
    <!-- 4.数据统计 -->
    <cov-number :covData="covData"></cov-number>
    <!-- 5.中国地图 -->
    <china-map />
    <!-- 6.世界地图 -->
    <world-map />
    <!-- 7.轮播图 -->
    <vue-swiper />
  </div>
</template>

<script>
import { getCovInfo } from "../../api/base";
import CovInfo from "./CovInfo/CovInfo.vue";
import CovNumber from "./CovInfo/CovNumber.vue";
import ChinaMap from "./VueEcharts/ChinaMap.vue";
import WorldMap from "./VueEcharts/WorldMap.vue";
import VueSwiper from "./VueSwiper/VueSwiper.vue";
export default {
  name: "Home",
  data() {
    return {
      covDesc: {},
      news: [],
      covData: {}, //全国数据统计
      city: "全国城市",
      show: false,
    };
  },
  created() {
    //进入页面获取本地存储
    let city = sessionStorage.getItem("city");
    console.log(city);
    if (city) {
      this.city = city + "疫情";
    }
    //请求病毒接口
    getCovInfo()
      .then((res) => {
        console.log("res.data中的数据", res.data.newslist[0]);
        //病毒信息介绍
        let data = res.data.newslist[0].desc;
        this.covDesc = {
          note1: data.note1,
          note2: data.note2,
          note3: data.note3,
          remark1: data.remark1,
          remark2: data.remark2,
          remark3: data.remark3,
        };
        //疫情热点
        this.news = res.data.newslist[0].news;
        //全国疫情的数据统计信息
        this.covData = {
          currentConfirmedCount: data.currentConfirmedCount,
          confirmedCount: data.confirmedCount,
          suspectedCount: data.suspectedCount,
          curedCount: data.curedCount,
          deadCount: data.deadCount,
          seriousCount: data.seriousCount,
          suspectedIncr: data.suspectedIncr,
          currentConfirmedIncr: data.currentConfirmedIncr,
          confirmedIncr: data.confirmedIncr,
          curedIncr: data.curedIncr,
          deadIncr: data.deadIncr,
          seriousIncr: data.seriousIncr,
          modifyTime: data.modifyTime,
        };
      })
      .catch((err) => console.error("出错"));
  },
  components: {
    CovInfo,
    CovNumber,
    ChinaMap,
    WorldMap,
    VueSwiper,
  },
  methods: {
    showPopup() {
      this.show = true;
    },
    goLogin(){
      this.$router.push('/login');
    },
    goRegiest(){
      this.$router.push('/register');
    }
  },
};
</script>
<style scoped>
.logo {
  position: relative;
}
.select {
  position: absolute;
  right: 0.2rem;
  top: 0.3rem;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
  padding: 0.1rem 0.2rem;
  border-radius: 0.2rem;
}
.list {
  margin: 0 0.2rem;
  border-top: 1px solid rgb(189, 185, 185);
  padding-top: 0.2rem;
  height: 80px;
}
.navimg {
  margin-left: 0.4rem;
}
</style>
